<template>
    <el-container :style="{height:getCurrentBrowserHeight}">
        <el-aside style="width: 200px; margin-top: 20px">
            <SideMenu @sideSelected="sendType" ref="sideMenu"></SideMenu>
        </el-aside>
        <el-main class="backtop" style="overflow: auto">
            <Furnitures ref="furniture"></Furnitures>
            <el-backtop target=".backtop"></el-backtop>
        </el-main>
    </el-container>
</template>

<script>
    import SideMenu from './SideMenu'
    import Furnitures from './Furnitures'

    export default {
        name: 'FurnitureIndex',
        components: {Furnitures, SideMenu},


        computed: {
            getCurrentBrowserHeight() {
                return window.innerHeight - 180 + 'px';
            }
        },

        methods: {
            sendType() {
                if (this.$refs.sideMenu.type === '0') {
                    this.$refs.furniture.url = '/furniture'
                } else {
                    this.$refs.furniture.url = '/furniture/category/' + this.$refs.sideMenu.type
                }

                this.$refs.furniture.initParamAndLoad()
            }
        }
    }

</script>

<style scoped>

</style>
